// 精品推荐
import { useState} from 'react'
import free from '@/public/image/free.webp'
import { SearchOutlined, CameraOutlined} from '@ant-design/icons';
import { Button, Input, Select, Space, } from 'antd';
import HomeCarousel from '@/components/HomeCarousel';
import HomeCalendar from '@/components/HomeCalendar';

const Recommended = () => {

  const options = [
    {
      value: '全部',
      label: '全部',
    },
    {
      value: 'H5',
      label: 'H5',
    },
    {
      value: '海报',
      label: '海报',
    },
    {
      value: '长页',
      label: '长页',
    },
    {
      value: '表单',
      label: '表单',
    },
    {
      value: '互动',
      label: '互动',
    },
    {
      value: '视频',
      label: '视频',
    },
    {
      value: '电子画报',
      label: '电子画报',
    },
    {
      value: '解决方案',
      label: '解决方案',
    }
  ];

  const suffix = (
    <CameraOutlined
      style={{
        fontSize: 20,
        color: '#CCC',
      }}
    />
  );

  const [open, setOpen] = useState(false);
  const handleMouseEnter = () => {
    setOpen(true);
  };

  const handleMouseLeave = () => {
    setOpen(false);
  };


  return (
    <div className='Recommended'>
      {/* 头部搜索框 */}
      <div className='premium_top'>
        <img width={260} src={free} alt="" />
        <div className='premium_search'>
          <Space.Compact style={{ width: '100%' }}>
            <Select
              listHeight={500}
              style={{ width: 120 }}
              defaultValue="全部"
              options={options}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
              open={open}
              optionRender={(option) => (
                <Space>
                  {option.data.value}
                </Space>
              )}
            />

            <Input suffix={suffix} defaultValue="邀请函" />
            <Button type="primary"><SearchOutlined style={{ fontWeight: 'bold', fontSize: '20px' }} /></Button>
          </Space.Compact>
          <ul>
            <span>邀请函</span>
            <span>个人简历</span>
            <span>招聘</span>
            <span>五一放假通知</span>
            <span>婚礼邀请函</span>
            <span>读书会</span>
            <span>二维码</span>
          </ul>
        </div>
        <div className='premium_calendar'>
            <HomeCalendar />
        </div>
      </div>
      {/* 轮播图 */}
      <HomeCarousel/>
    </div>
  )
}

export default Recommended
